<template>
    <div class="item">
            <div class="p1"></div>
            <div class="p2"></div>
            <div class="p3"></div>
    </div>
</template>
<style scoped>
.item{
    display: flex;
    flex-direction: row;
    /* 水平居中 */
    justify-content: center;
        /* 垂直居中 */
    align-items: center;
    width: 100%;
    height: 400px;
    background: darkgray;
}
.p1{
    height: 100px;
    width: 100px;
    border: 1px solid #000;
    background: chartreuse;
}
.p2{
    height: 200px;
    width: 200px;
    border: 1px solid #000;
    background: rgb(132, 26, 194);
}
.p3{
    height: 300px;
    width: 300px;
    border: 1px solid #000;
    background: rgb(49, 220, 250);
}
</style>